<template>
    <div>
        <h2>Your Cart</h2>
        <p v-show="!products.length"><i>Please add some products to cart.</i></p>
        <ul>
            <li v-for="p in products">
                <div>{{p.title}} - {{p.price | currency}} x {{p.quantity}}</div>
            </li>
        </ul>
        <p>Total: {{ total | currency }}</p>
        <p><el-button :disabled="!products.length" @click="checkout(products)">Checkout</el-button></p>
        <p v-show="checkoutStatus">Checkout {{ checkoutStatus }}.</p>
    </div>
</template>
<script>

    import { mapGetters } from 'vuex'

    export default {
        computed:{
            ...mapGetters({
                products:'cartProducts',
                checkoutStatus:'checkoutStatus'
            }),
            total() {
                return this.products.reduce((total, p) => {
                    return total + p.price * p.quantity;
                }, 0)
            }
        },

        methods:{
            checkout (products) {
                this.$store.dispatch('checkout', products)
            }
        }
    }
</script>
<style scoped lang="less" rel="stylesheet/scss" type="text/css">

</style>